<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>ajax入门案例</h1>
		<script type="text/javascript" src="../js/axios.js"></script>
		<!-- promise是Axios封装服务器返回值的对象 -->
		<script type="text/javascript">
			//3.Axios的优化
			axios.defaults.baseURL = "http://localhost:8080"
		
			//1.编辑自己的js代码
			let url1 = "http://localhost:8080/axios/findStr"
			axios.get("/axios/findStr")
				 .then(function(promise){
				 	 console.log(promise)
				 	 console.log(promise.data)
				 })
			
			//2.带参数的业务调用
			let url2 = "http://localhost:8080/axios/getUserById?id=100"
			axios.get("/axios/getUserById?id=100")
				 .then(function(promise){
					 console.log(promise.data)
				 })
				 
			//4.对象参数传递的写法,利用API自动拼接参数
			let user = {id : 100, name : "tomcat"}
			axios.get("/axios/findUser", {params : user})
				 .then(promise => {
					 console.log(promise.data)
				 })
				 
			//5.RestFul结构实现数据传递,第一种:简单操作
			let rest1 = {id : 100, name : "tomcat", age : 18}
			axios.get("/axios/result/" + rest1.id + "/" + rest1.name + "/" + rest1.age)
				 .then(promise => {
					 console.log(promise.data)
				 })
			
			/**
			 * 5.RestFul结构实现数据传递,第二种:模板字符串写法
			 * 语法 : 反引号``
			 * 字符取值 : /${rest2.id}
			 * 作用 : 1.常见字符串拼接
			 * 		  2.可以保证代码数据结构
			 */	 
			let rest2 = {id : 100, name : "tomcat", age : 18}
			axios.get(`/axios/result/${rest2.id}/${rest2.name}/${rest2.age}`)
				 .then(promise => {
				 	console.log(promise.data)
				 })
			//模板字符串,保证代码的格式
			let div = `<div>
							<p>天青色等烟雨</p>
							<p>而我在等你</p>
					        <p>炊烟渺渺升起</p>
							<p>隔江千万里</p>
					  </div>`
		</script>
	</body>
</html>
